<template>
  <div>
    <div id="exploreTop">
      <div v-show="$store.state.isShowTabs">
        <van-tabs class="exploreTabs" v-model="exploreActive" animated color="#000">
          <van-tab name="ecircle" to="/index/explore/ecircle" class="exploreTab" title="圈子">
            <!--          <ECircle></ECircle>-->
          </van-tab>
          <van-tab name="hotpoint" to="/index/explore/hotpoint" class="exploreTab" title="热点">
            <!--          <Hotpoint></Hotpoint>-->
          </van-tab>
        </van-tabs>
        <div style="height: 44px"></div>
      </div>
      <transition mode="out-in">
        <keep-alive exclude="Detail,CircleDetail">
          <router-view/>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>
import ECircle from "./ECircle";
import Hotpoint from "./Hotpoint";

export default {
  name: "Explore",
  created() {
    if (this.$route.path === '/index/explore/hotpoint') {
      this.exploreActive = 'hotpoint'
    }
  },
  data() {
    return {
      exploreActive: 0,
      curPage: 'slide-left'
    }
  },
  components: {
    ECircle,
    Hotpoint
  }
}
</script>

<style scoped>
#exploreTop {
  height: 100%;
}

.exploreTabs {
  /*height: 100%;*/
  position: fixed;
  width: 100%;
  z-index: 1000;
  height: 44px;
  top: 0;
}

.exploreTab {
  /*height: 100%;*/
  position: fixed;
  top: 0;
}

/deep/ .van-tabs__content--animated {
  height: 0;
}

/deep/ .van-tabs__content {
  height: 0;
}

/deep/ .van-tabs__track {
  height: 0;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all .5s;
  position: absolute;
  width: 100%;
  left: 0;
}

.slide-right-enter {
  transform: translateX(-100%);
}

.slide-right-leave-active {
  transform: translateX(100%);
}

.slide-left-enter {
  transform: translateX(100%);
}

.slide-left-leave-active {
  transform: translateX(-100%);
}
</style>
